<template>
  <div>
    <div class="i-layout-page-header">
      <div>
        <el-tabs class="badge" v-model="status_str" @tab-click="handleTabClick">
          <!-- <el-tab-pane
              v-for="(item , index) in tabs"
              :disabled="false"
              :label="item.label"
              :name="item.type"
              :key="index"
          />-->
          <el-tab-pane v-for="(item , index) in tabs" :key="index" :name="item.type">
            <template #label>
              <!-- <el-badge :value="tablists[item.type]||0" :max="99" type="primary"> -->
                <span>{{item.label}}</span>
                <!-- <span class="badge">{{tablists[item.type]||0}}</span> -->
              <!-- </el-badge> -->
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-card :bordered="false" shadow="never" class="ivu-mt">
      <el-form
        ref="orderFrom"
        :model="orderFrom"
        label-width="75px"
        label-position="right"
        inline
        @submit.native.prevent
      >
        <el-form-item label="订单搜索：" label-for="nickname">
          <el-input
            v-model="orderFrom.keywords"
            placeholder="请输入搜索关键字"
            element-id="nickname"
            clearable
            style="width: 300px"
          >
            <el-select v-model="orderFrom.fieldKey" slot="prepend" style="width: 100px">
              <el-option value="all" label="全部"></el-option>
              <el-option value="id" label="订单ID"></el-option>
              <el-option value="ordersn" label="订单号"></el-option>
              <el-option value="uid" label="用户UID"></el-option>
              <el-option value="linkName" label="联系人"></el-option>
              <el-option value="linkMobile" label="联系方式"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="时间选择：" label-for="user_time_type">
          <el-select
            v-model="orderFrom.timeKey"
            placeholder="请选择访问情况"
            element-id="user_time_type"
            clearable
          >
            <el-option value="add_time" label="下单时间"></el-option>
            <el-option value="pay_time" label="支付时间"></el-option>
            <el-option value="book_time" label="预约时间"></el-option>
            <el-option value="appoint_time" label="指派时间"></el-option>
            <el-option value="finish_time" label="完成时间"></el-option>
            <el-option value="cancel_time" label="取消时间"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间：" label-for="time_type" v-if="orderFrom.timeKey">
          <el-date-picker
            @change="onchangeTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="timeVal"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="mr20"
            :picker-options="options"
          ></el-date-picker>
        </el-form-item>
        <el-form-item >
        <el-button type="primary" @click="orderSearchs">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-divider divided />
      <el-table
        :data="orderLists"
        :row-class-name="rowClassName"
        ref="table"
        class="mt25"
        :loading="loading"
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="订单信息" min-width="150" fixed="left" #default="{row}">
          <div>订单ID：{{row.id}}</div>
          <div>订单号：{{row.ordersn}}</div>
        </el-table-column>
        <el-table-column label="用户信息" min-width="200" #default="{row}">
          <div>用户UID：{{row.uid}}</div>
          <div>联系电话：{{row.linkMobile}}</div>
          <div>联系人：{{row.linkName}}</div>
          <div>用户地址：{{row.userAddress}}</div>
        </el-table-column>
        <el-table-column label="服务信息" min-width="180" #default="{row}">
          <div>服务项目：{{row.itemName}}</div>
          <div>购买类型：{{row.itemType == 1?'普通服务':'次卡服务'}}</div>
          <div>项目规格：{{row.itemSpecData.specName}}</div>
          <div v-if="row.itemType == 2">剩余次数：{{row.vipLeftTimes}}次</div>
          <div v-if="row.itemType == 2">截止时间：{{row.vipEndTimeStr}}</div>

          <div v-if="row.itemType == 1 && row.status > 20">上门时间：{{row.signTimeDesc}}</div>
          <div v-if="row.payType == 'card'">次卡订单：{{row.vipOrderSn}}</div>
        </el-table-column>
        <el-table-column label="人员信息" min-width="150" #default="{row}">
          <template v-if="row.itemType == 1">
            <div v-if="row.companyId > 0">服务门店：{{row.company.title}}</div>
            <div v-if="row.serviceStaffId > 0">服务人员：{{row.staffData.title}}</div>
          </template>
        </el-table-column>
        <el-table-column label="费用信息" min-width="120" #default="{row}">
          <div>应付金额：{{row.originalPrice}}</div>
          <div>实付金额：{{row.payPrice}}</div>
          <div v-if="row.status == 40 && row.itemType == 1">
            <div>服务酬劳：{{row.costFee||0.00}}</div>
            <div v-if="row.companyId">门店酬劳：{{row.companyFee||0.00}}</div>
            <div v-if="row.agentId">代理酬劳：{{row.agentFee||0.00}}</div>
          </div>
          <div>
            <el-tag v-if="row.status == '0'" type="default">{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '5'" type="default">{{row.statusTest}}</el-tag>
            <el-tag
              v-else-if="row.status == '10' && row.itemType == 1"
              type="warning"
            >{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '20'" type="warning">{{ row.statusTest }}</el-tag>

            <el-tag v-else-if="row.status == '25'" type="#66CCFF">{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '30'" type="#66CCFF">{{ row.statusTest }}</el-tag>
            <el-tag
              v-else-if="row.status == '40'||(row.itemType == 2 && row.status == 10)"
              type="success"
            >{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '50'" type="error">{{ row.statusTest }}</el-tag>

            <el-tag v-else-if="row.status == '-1'" type="error">{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '-10'" type="error">{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '-20'" type="error">{{ row.statusTest }}</el-tag>
            <!-- <el-tag v-else color="default">未知</el-tag> -->

            <el-tag v-if="row.status == 10 && row.is_busy">{{'请尽快指派'}}</el-tag>
            <el-tag v-if="row.status == 20 && row.is_busy">{{'请尽快上门'}}</el-tag>

            <el-tag v-if="row.payType == ''" type="default">{{ row.payTypeDesc }}</el-tag>
            <el-tag v-else-if="row.payType == 'yue'" type="warning">{{ row.payTypeDesc }}</el-tag>
            <el-tag v-else-if="row.payType == 'offline'" color="#66CCFF">{{ row.payTypeDesc }}</el-tag>
            <el-tag v-else-if="row.payType == 'weixin'" type="success">{{ row.payTypeDesc }}</el-tag>
            <el-tag v-else-if="row.payType == 'card'" type="warning">{{ row.payTypeDesc }}</el-tag>
            <el-tag v-else-if="row.payType == 'alipay'" color="blue">{{ row.payTypeDesc }}</el-tag>

            <!-- <el-tag v-else type="default">未知</el-tag> -->
          </div>
        </el-table-column>
        <el-table-column label="备注" min-width="200" #default="{row}">
          <div>客户备注：{{row.remark}}</div>
          <div>平台备注：{{row.remarkSaler}}</div>
        </el-table-column>
        <el-table-column label="时间" min-width="200" #default="{row}">
          <div>下单时间：{{row.addTimeDesc}}</div>
          <div v-if="row.status >= 0">支付时间：{{row.payTimeDesc}}</div>
          <div v-if="row.itemType == 1 && row.status >= 10">预约时间：{{row.bookTimeDesc}}</div>
          <template v-if="row.itemType == 1">
            <div v-if="row.status >= 20">指派时间：{{row.appointTimeDesc}}</div>
            <div v-if="row.status >=25">签到时间：{{ row.signTimeDesc }}</div>
            <div v-if="row.status >= 30 ">完成时间：{{row.handleTimeDesc}}</div>
          </template>
          <div v-if="row.status >= 40 ">结单时间：{{row.finishTimeDesc}}</div>
          <div v-if="row.status == -1">取消时间：{{row.cancelTimeDesc}}</div>
        </el-table-column>
        <el-table-column label="签到图片" min-width="100" #default="{row}">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.signImgsArray[0]"
            :preview-src-list="row.signImgsArray"
            v-if="row.signImgsArray.length > 0"
          ></el-image>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <el-pagination
          :total="total"
          show-elevator
          show-total
          :current-page="orderFrom.page"
          @current-change="pageChange"
          :page-size="orderFrom.limit"
        />
      </div>
    </el-card>
  </div>
</template>
  
  <script>
import { getServiesOrderListApi } from '@/api/agent';

export default {
  name: 'service_order',
  data() {
    return {
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      lock: false,
      spinShow: false,
      collapse: false,
      options: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)),
              );
              end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近7天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6)),
              );
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)),
              );
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '本年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      orderFrom: {
        page: 1,
        limit: 15,
        status: 'all',
        keywords: '',
        fieldKey: 'all',
        payType: '',
        isPay: '',
        itemType: 'all',
        timeKey: '',
        cateId: 'all',
        item_id: 'all',
        time: '',
        ids: '',
      },
      orderLists: [],
      tablists: {},
      timeVal: [],
      total: 0,
      tabs: [
        {
          type: 'all',
          label: '全部',
        },
        {
          type: '-1',
          label: '订单已取消',
        },
        {
          type: '0',
          label: '待支付',
        },
        {
          type: '5',
          label: '待预约',
        },
        {
          type: '10',
          label: '待接单',
        },
        {
          type: '20',
          label: '已接单',
        },
        {
          type: '25',
          label: '服务中',
        },
        {
          type: '30',
          label: '已完成',
        },
        {
          type: '40',
          label: '已结单',
        },
        {
          type: '50',
          label: '已过期',
        },
        {
          type: '-10',
          label: '退款申请',
        },
        {
          type: '-20',
          label: '已退款',
        },
      ],
      status_str: 'all',
      orderId: 0, // 当前订单id
      city_id: 0, // 当前城市id
      service_user_id: 0, // 当前员工id
      selectedIds: new Set(), //选中合并项的id:0
      ids: '',
    };
  },
  watch: {
    $route(to, from) {
      if (this.$route.query.status) {
        this.status_str = this.$route.query.status;
        this.orderFrom.status = this.status_str;
        this.getList();
      }
    },
  },
  created() {
    if (this.$route.query.status) {
      this.status_str = this.$route.query.status;
      this.orderFrom.status = this.status_str;
    }
    this.getList();
  },
  mounted() {
    if (this.$route.query.status) {
      this.status_str = this.$route.query.status;
      this.orderFrom.status = this.status_str;
    }
    // this.getTabs();
  },
  methods: {
    rowClassName(row) {
      if (row.is_busy) {
        return 'demo-table-error-row';
      }
      return '';
    },
    // 重置
    reset(name) {
      (this.orderFrom = {
        page: 1,
        limit: 15,
        status: 'all',
        keywords: '',
        fieldKey: 'all',
        payType: '',
        isPay: '',
        timeKey: '',
        time: '',
        itemType: 'all',
        cateId: 'all',
        item_id: 'all',
      }),
        this.getList();
    },
    show(type) {
      let viewer = this.$el.querySelector('.' + type).$viewer;
      viewer.show();
    },
    // 选择日期
    onchangeTime(e) {
      this.timeVal = e;
      this.orderFrom.time = this.timeVal[0] ? this.timeVal.join('_') : '';
      this.getList();
    },
    // 订单列表
    getList() {
      this.loading = true;
      getServiesOrderListApi(this.orderFrom).then(async (res) => {
        let data = res;
        this.orderLists = data.list;
        this.total = data.total;
        this.loading = false;
      });
    },
    // 分页
    pageChange(index) {
      this.orderFrom.page = index;
      this.getList();
    },
    // 退款详情
    orderRemark(row) {
      this.$refs.refund.modals = true;
      this.$refs.refund.is_remark = false;
      this.orderId = row.id;
      this.$nextTick((e) => {
        this.$refs.refund.getOrderInfo();
      });
    },
    handleTabClick(tab, event) {
      console.log(tab, event);
      this.orderFrom.status = tab.name;
      this.orderFrom.page = 1;
      this.getList();
    },
    // 表格搜索
    orderSearchs() {
      this.orderFrom.status = this.status_str;
      this.orderFrom.page = 1;
      this.getList();
    },
  },
};
</script>
  
  <style scoped lang="scss">
.ivu-select-dropdown.ivu-dropdown-transfer {
  background: #fff !important;
  width: 110px !important;
}
.tabBox_img {
  display: flex;
}

.ivu-table .demo-table-error-row td {
  /* background-color: red; */
  color: red;
}

.badge {
  & ::v-deep .el-badge__content.is-fixed {
    top: 10px;
    right: 8px;
  }
}
</style>
  